import React, { Component, Fragment } from 'react';
import { connect } from 'dva'
import BaseTable from './baseTable'
import {Popconfirm} from 'antd'

class SeekTechnologyTable extends BaseTable {
    constructor(props) {
        super(props),
            this.state = {
                column: [
                    {
                        title: "作用材料", dataIndex: "functionalMaterials", key: "functionalMaterials", width: 150,
                        filters: [
                            { text: "生活垃圾", value: "生活垃圾" },
                            { text: "农业废物", value: "农业废物" },
                            { text: "工业固体废物", value: "工业固体废物" },
                            { text: "危险废弃物", value: "危险废弃物" },
                            { text: "其他", value: "其他" }
                        ],
                        onFilter: (value, record) => record.functionalMaterials.indexOf(value) === 0
                    },
                    {
                        title: "技术种类", dataIndex: "technologyCategory", key: "technologyCategory", width: 150,
                        filters: [
                            { text: "固废分离技术", value: "固废分离技术" },
                            { text: "循环再利用技术", value: "循环再利用技术" },
                            { text: "减少污染", value: "减少污染" },
                            { text: "分类回收", value: "分类回收" },
                            { text: "其他", value: "其他" }
                        ],
                        onFilter: (value, record) => record.technologyCategory.indexOf(value) === 0
                    },
                    { title: "技术的详细信息", dataIndex: "technicalDetails", key: "technicalDetails" }
                ]
            }
    }

    componentDidMount() {
        this.props.dispatch({
            type: "seekTechnology/getSeekTechnologyTableData"
        })
    }

    componentWillReceiveProps(nextProps){
        if (nextProps.user.userType == 3) {
            if(this.state.column.length == 4){
                return
            }
            this.setState({
                column: [
                    ...this.state.column,
                    {
                        title: "操作", dataIndex: "operation", key: "operation",
                        render: (text, record, index) => {
                            return(
                                <Popconfirm title={"是否确认删除此条技术征求信息？"} onConfirm={()=>{this.deleteTechnologySeek(record.id)}}><a>删除</a></Popconfirm>
                            )
                        }
                    }
                ]
           })
        }
    }

    deleteTechnologySeek = id => {
        this.props.dispatch({
            type:"seekTechnology/deleteTechnologySeek",
            data:{
                id:id
            }
        })

        this.props.dispatch({
            type: "seekTechnology/getSeekTechnologyTableData"
        })
    }

    render() {
        return super.render(this.state.column, this.props.dataSource, { pageSize: 12 })
    }
}

const mapStateToProps = state => {
    let dataSource = state.seekTechnology.seekTechnologyList
    let user = state.app.user
    return {
        dataSource,
        user
    }
}

export default connect(mapStateToProps)(SeekTechnologyTable)